<template>
	<view class="container goods-container">
		<view class="header-operation">
			<view class="header-operation-left">
				<view :class="{ active: type == 'goods' }" @click="switchItem('goods')">商品</view>
				<view :class="{ active: type == 'service' }" @click="switchItem('service')">项目</view>
				<view :class="{ active: type == 'money' }" @click="switchItem('money')">无码商品</view>
			</view>
			<view class="header-operation-right">
				<input type="text" placeholder="请输入商品编码" placeholder-style="font-size:0.14rem;color:#ACACAC;"
					v-model="skuNo" @focus="setActive('inputSkuNo')" @blur="setActive('')" />
				<input placeholder="请输入商品/项目名称" placeholder-style="font-size:0.14rem;color:#ACACAC;"
					v-model="searchText" @focus="setActive('inputSearchText')" @blur="setActive('')" />
				<view class="search-btn" @click="search"><text class="iconfont icon31sousuo"></text></view>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-x="true" class="type-switch common-scrollbar"
				v-show="serviceCategory.length && type == 'service'">
				<view class="switch-item" :class="{ active: serviceCategoryId == 'all' }"
					@click="serviceCategoryId = 'all'">所有分类</view>
				<view class="switch-item" :class="{ active: serviceCategoryId == item.category_id }"
					v-for="(item, index) in serviceCategory" :key="index" @click="serviceCategoryId = item.category_id">
					{{ item.category_name }}
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="type-switch common-scrollbar"
				v-show="goodsCategory.length && type == 'goods'">
				<view class="switch-item" :class="{ active: goodsCategoryId == 'all' }"
					@click="goodsCategoryId = 'all'">所有分类</view>
				<view class="switch-item" :class="{ active: goodsCategoryId == item.category_id }"
					v-for="(item, index) in goodsCategory" :key="index" @click="goodsCategoryId = item.category_id">
					{{ item.category_name }}
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap goods" v-show="type == 'goods'" @scrolltolower="getGoods()">
				<view class="table-list" v-show="goodsData.list.length" data-focus="true">
					<view class="table-item goods-select-focus goods-focus"
						:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1,focus:indexFocus == index }"
						v-for="(item, index) in goodsData.list" :key="index" @click.stop="goodsSelect(item,index)"
						tabindex="0" :data-tab-index="index">
						<view class="item-name multi-hidden">{{ item.goods_name }}</view>
						<view class="item-info">
							<view class="item-img">
								<image :src="
										item.goods_image == 'public/uniapp/default_img/goods.png'
											? $util.img('public/uniapp/default_img/goods.png')
											: $util.img(item.goods_image.split(',')[0], { size: 'small' })
									" @error="item.goods_image = 'public/uniapp/default_img/goods.png'" mode="widthFix"></image>
							</view>
							<view class="item-other">
								<view class="item-money">
									<text class="util">￥</text>
									{{ item.price | moneyFormat }}
								</view>
								<view class="item-stock">库存：{{ item.stock }}</view>
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0">
							<image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="empty" v-show="!goodsData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无商品</view>
				</view>
				<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false"
					ref="goodsLoading"></nc-loading>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap service" v-show="type == 'service'"
				@scrolltolower="getService()">
				<view class="table-list" v-show="serviceData.list.length">

					<view class="table-item goods-select-focus service-focus"
						:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1,focus:indexFocus == index }"
						v-for="(item, index) in serviceData.list" :key="index" @click.stop="goodsSelect(item,index)"
						tabindex="0" :data-tab-index="index">
						<view class="item-name multi-hidden">{{ item.goods_name }}</view>
						<view class="item-info">
							<view class="item-img">
								<image :src="
										item.goods_image == 'public/uniapp/default_img/goods.png'
											? $util.img('public/uniapp/default_img/goods.png')
											: $util.img(item.goods_image.split(',')[0], { size: 'small' })
									" @error="item.goods_image = 'public/uniapp/default_img/goods.png'" mode="widthFix"></image>
							</view>
							<view class="item-other">
								<view class="item-money">
									<text class="util">￥</text>
									{{ item.price | moneyFormat }}
								</view>
								<view class="item-time" v-if="item.service_length">时长：{{ item.service_length }}分钟</view>
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0">
							<image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="empty" v-show="!serviceData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无商品</view>
				</view>
				<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false"
					ref="loading"></nc-loading>
			</scroll-view>

			<view class="table-pages" v-show="type == 'service' && serviceData.list.length">
				<uni-pagination :total="serviceData.total" :showIcon="true" @change="pageChange"
					:pageSize="serviceData.size" :value="serviceData.index" />
			</view>
			<view class="table-pages" v-show="type == 'goods' && goodsData.list.length">
				<uni-pagination :total="goodsData.total" :showIcon="true" @change="pageChange"
					:pageSize="goodsData.size" :value="goodsData.index" />
			</view>

			<view class="money-pages" v-show="type == 'money'">
				<view class="money-wrap">
					<view class="content-wrap">
						<view class="unit">￥</view>
						<input type="text" class="money" v-model="paymentMoney" @input="paymentMoneyChange" />
					</view>
					<view class="keyboard-wrap">
						<view class="num-wrap">
							<view class="key-item" @click="keydown('1')">1</view>
							<view class="key-item" @click="keydown('2')">2</view>
							<view class="key-item" @click="keydown('3')">3</view>
							<view class="key-item" @click="keydown('4')">4</view>
							<view class="key-item" @click="keydown('5')">5</view>
							<view class="key-item" @click="keydown('6')">6</view>
							<view class="key-item" @click="keydown('7')">7</view>
							<view class="key-item" @click="keydown('8')">8</view>
							<view class="key-item" @click="keydown('9')">9</view>
							<view class="key-item" @click="keydown('00')">00</view>
							<view class="key-item" @click="keydown('0')">0</view>
							<view class="key-item" @click="keydown('.')">.</view>
						</view>
						<view class="operation-wrap">
							<view class="delete" @click="deleteCode">删除 [Del]</view>
							<view class="delete" @click="paymentMoney = ''">清空</view>
							<view class="confirm" @click="paymentMoneyConfirm">确认<br /> [Enter]</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="skuPopup" type="center">
			<view class="sku-wrap">
				<view class="header">
					<text class="title">{{ skuinfo && skuinfo.status == 'edit' ? '调整' : '选择' }}</text>
					<text class="iconfont iconguanbi1" @click="$refs.skuPopup.close()"></text>
				</view>
				<view class="body">
					<scroll-view scroll-y="true">
						<view class="goods-info" v-if="skuinfo">
							<view class="image">
								<image :src="$util.img(skuinfo.sku_image, { size: 'small' })"
									@error="skuinfo.sku_image = $util.img('public/uniapp/default_img/goods.png')"
									mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="multi-hidden">{{ skuinfo.goods_name }}</view>
								<view class="price">￥{{ skuinfo.adjust_price }} /
									{{ skuinfo.unit ? skuinfo.unit : '件' }}
								</view>
								<view>库存：{{ skuinfo.stock }}</view>
							</view>
						</view>
						<view v-for="(item, index) in goodsSpec" :key="index">
							<view class="spec">{{ item.spec_name }}</view>
							<view class="spec-value" v-if="!item.isWeigh">
								<view class="value-item"
									:class="{ active: spec.selected,disabled : (!spec.selected && skuinfo.status == 'edit') }"
									v-for="(spec, sindex) in item.value" :key="sindex" @click="skuSelect(spec.sku_id)">
									{{ spec.spec_value_name }}
								</view>
							</view>
						</view>
						<block v-if="skuinfo">
							<view class="spec">单价</view>
							<view class="spec-value spec-value-form">
								<input type="text" class="spec-value-input" v-model="skuinfo.adjust_price"
									placeholder="请输入单价" />
								<text>元</text>
							</view>
							<block v-if=" skuinfo.goods_class != 6">
								<view class="spec">数量</view>
								<view class="spec-value spec-value-form">
									<view class="num-dec" @click.stop="dec">-</view>
									<input type="text" class="spec-value-input" v-model="skuinfo.num"
										placeholder="请输入数量" :focus="inputFocus" @focus="inputFocus = true"
										@blur="inputFocus = false" />
									<view class="num-inc" @click.stop="inc">+</view>
									<text>{{ skuinfo.unit }}</text>
								</view>
							</block>
							<block v-if="skuinfo.goods_class == 6 && skuinfo.pricing_type == 'weight'">
								<view>
									<view class="spec">称重</view>
									<view class="spec-value spec-value-form">
										<input type="text" class="spec-value-input" v-model="skuinfo.weigh"
											placeholder="请输入重量" :focus="inputFocus" @focus="inputFocus = true"
											@blur="inputFocus = false" />
										<text>{{ skuinfo.unit }}</text>
									</view>
								</view>
								<view class="flex scale-action" v-if="addon.includes('scale') && cashierSacle">
									<button type="primary" class="default-btn" plain @click="zero">归零</button>
									<button type="primary" class="default-btn" plain @click="tare">去皮</button>
								</view>
							</block>
						</block>
					</scroll-view>
				</view>
				<view class="footer">
					<button type="default" class="primary-btn" @click="skuConfirm"
						:disabled="skuinfo && skuinfo.stock == 0">确认 [Enter]</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var self;

	export default {
		name: 'ncGoods',
		props: {
			goodsIds: {
				type: Array,
				default: []
			},
			indexFocus: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				type: 'goods',
				serviceCategory: [],
				serviceCategoryId: 'all',
				serviceData: {
					size: 12,
					index: 1,
					total: 0,
					list: []
				},
				goodsCategoryId: 'all',
				goodsCategory: [],
				goodsData: {
					size: 12,
					index: 1,
					total: 0,
					list: []
				},
				skuinfo: null,
				allsku: null,
				skuNo: '',
				searchText: '',
				itemNum: 3,
				mediaQueryOb: null,
				paymentMoney: '',
				cashierSacle: null,
				actionIndex: 0,
				inputFocus: false
			};
		},
		created() {
			this.init();
		},
		mounted() {
			this.mediaQueryOb = uni.createMediaQueryObserver(this);

			this.mediaQueryOb.observe({
					maxWidth: 1300
				},
				matches => {
					if (matches) this.itemNum = 2;
				}
			);

			this.mediaQueryOb.observe({
					minWidth: 1301,
					maxWidth: 1900
				},
				matches => {
					if (matches) this.itemNum = 3;
				}
			);

			this.mediaQueryOb.observe({
					minWidth: 1901
				},
				matches => {
					if (matches) this.itemNum = 4;
				}
			);
		},
		methods: {
			init() {
				self = this;
				this.getServiceCategory();
				this.getGoodsCategory();
				this.getService();
				this.getGoods();
			},
			getServiceCategory() {
				this.$api.sendRequest({
					url: '/cashier/storeapi/service/category',
					success: res => {
						if (res.code == 0 && res.data) {
							this.serviceCategory = res.data;
						}
					}
				});
			},
			getGoodsCategory() {
				this.$api.sendRequest({
					url: '/cashier/storeapi/goods/category',
					success: res => {
						if (res.code == 0 && res.data) {
							this.goodsCategory = res.data;
						}
					}
				});
			},
			getService() {
				this.$api.sendRequest({
					url: '/cashier/storeapi/service/page',
					data: {
						page: this.serviceData.index,
						page_size: this.serviceData.size,
						category: this.serviceCategoryId,
						search_text: this.searchText,
						sku_no: this.skuNo,
						status: 1
					},
					success: res => {
						if (this.$refs.loading) this.$refs.loading.hide();
						if (res.code == 0) {
							this.serviceData.total = res.data.count;
							this.serviceData.list = res.data.list || [];
						}
					}
				});
			},
			getGoods() {
				this.$api.sendRequest({
					url: '/cashier/storeapi/goods/page',
					data: {
						page: this.goodsData.index,
						page_size: this.goodsData.size,
						category: this.goodsCategoryId,
						search_text: this.searchText,
						sku_no: this.skuNo,
						goods_class: '1,6',
						status: 1
					},
					success: res => {
						if (this.$refs.goodsLoading) this.$refs.goodsLoading.hide();
						if (res.code == 0) {
							this.goodsData.total = res.data.count;
							this.goodsData.list = res.data.list || [];
							this.goodsData.list.forEach(item => {
								item.adjust = {}; // 存储规格调价
							})
						}
					}
				});
			},
			goodsSelect(data, index) {
				if (!data.stock) return;

				if (index != undefined) this.actionIndex = index;

				if (data.adjust && data.adjust['sku_id_' + data.sku_id]) {
					data.adjust_price = data.adjust['sku_id_' + data.sku_id].adjust_price;
					data.is_adjust = data.adjust['sku_id_' + data.sku_id].is_adjust;
				}

				if (data.goods_spec_format || (data.goods_class == 6 && data.pricing_type == 'weight') || (data.status &&
						data.status == 'edit')) {
					this.setActive('SelectGoodsSku');
					this.$api.sendRequest({
						url: '/cashier/storeapi/goods/skulist',
						data: {
							goods_id: data.goods_id
						},
						success: res => {
							if (res.code == 0) {
								let obj = {};
								res.data.forEach(item => {
									item.goods_spec_format = JSON.parse(item.goods_spec_format);
									obj['sku_id_' + item.sku_id] = item;
								});
								this.allsku = obj;
								this.skuinfo = obj['sku_id_' + data.sku_id];

								// 调整价格
								if (data.adjust_price) {
									this.skuinfo.adjust_price = data.adjust_price; // 使用调价
								} else {
									this.skuinfo.adjust_price = data.price; // 未调价，使用原价
								}

								this.skuinfo.adjust_price = parseFloat(this.skuinfo.adjust_price).toFixed(2);

								this.$set(this.skuinfo, 'status', data.status || '');

								if (data.goods_class != 6) {
									this.skuinfo.num = data.num || 1; // 默认购买数量为1
								}

								// 称重商品
								if (data.goods_class == 6 && data.pricing_type == 'weight') {
									let num = data.num || '';

									if (num) {
										this.$set(this.skuinfo, 'weigh', num);
										Object.values(this.allsku).forEach((item, index) => {
											this.$set(item, 'weigh', num);
										});
									}

									// 打开收银秤
									this.openCashierSacle()
								}

								this.$refs.skuPopup.open();

								setTimeout(() => {
									this.inputFocus = true;
								}, 200);
							}
						}
					});
				} else {
					this.$emit('select', data);
				}
			},
			skuSelect(sku_id) {
				if (!this.skuinfo.status) {
					this.skuinfo = this.allsku['sku_id_' + sku_id];

					let skuData = this.goodsData.list[this.actionIndex];

					// 调整价格
					if (skuData.adjust && skuData.adjust['sku_id_' + sku_id]) {
						this.skuinfo.adjust_price = skuData.adjust['sku_id_' + sku_id].adjust_price;
						this.skuinfo.is_adjust = skuData.adjust['sku_id_' + sku_id].is_adjust;
					} else {
						// 使用原价
						this.skuinfo.adjust_price = this.skuinfo.price;
					}
					this.skuinfo.adjust_price = parseFloat(this.skuinfo.adjust_price).toFixed(2);

					if (this.skuinfo != 6) {
						this.skuinfo.num = this.skuinfo.num || 1; // 默认购买数量为1
					}

				}
			},
			skuConfirm() {
				if (!this.skuinfo) return;
				if (this.skuinfo.stock == 0) {
					this.$util.showToast({
						title: '商品库存不足'
					});
					return;
				}

				if (this.skuinfo.price.length == 0 || this.skuinfo.adjust_price.length == 0) {
					this.$util.showToast({
						title: '请输入单价'
					});
					return;
				}

				if (this.skuinfo.price < 0 || this.skuinfo.adjust_price < 0) {
					this.$util.showToast({
						title: '单价不能小于0'
					});
					return;
				}

				if (this.skuinfo.goods_class != 6) {
					if (Number.parseInt(this.skuinfo.num) <= 0 || !/^\d{0,10}$/.test(Number.parseInt(this.skuinfo
							.num))) {
						this.$util.showToast({
							title: '请输入合法的数值，数值要大于零'
						});
						return;
					}
					if (this.skuinfo.stock < this.skuinfo.num) {
						this.$util.showToast({
							title: '商品库存不足'
						});
						return;
					}
				}
				if (this.skuinfo.goods_class == 6) {
					if (Number.parseFloat(this.skuinfo.weigh) <= 0 || !/^\d{0,10}(.?\d{0,3})$/.test(Number.parseFloat(this
							.skuinfo.weigh))) {
						this.$util.showToast({
							title: '请输入合法的数值，数值要大于零且小数位不能超过三位'
						});
						return;
					}
					if (this.skuinfo.stock < this.skuinfo.weigh) {
						this.$util.showToast({
							title: '商品库存不足'
						});
						return;
					}

					try {
						POS_.send('CloseWeigher');
					} catch (e) {}
				}

				this.skuinfo.is_adjust = this.skuinfo.adjust_price != this.skuinfo.price;

				// 设置右侧商品的调价
				if (!this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuinfo.sku_id]) {
					this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuinfo.sku_id] = {};
				}
				this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuinfo.sku_id].adjust_price = this.skuinfo
					.adjust_price;
				this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuinfo.sku_id].is_adjust = this.skuinfo
					.is_adjust;

				this.$emit('select', this.skuinfo);
				this.$refs.skuPopup.close();
			},
			search() {
				// if (this.searchText == '') return;
				switch (this.type) {
					case 'service':
						this.serviceData.page = 0;
						this.$refs.loading.show();
						this.getService();
						break;
					case 'goods':
						this.goodsData.page = 0;
						this.$refs.goodsLoading.show();
						this.getGoods();
						break;
				}
			},
			destroyed() {
				this.mediaQueryOb.disconnect();
			},
			switchStoreAfter() {
				this.serviceCategory = [];
				this.serviceCategoryId = 'all';
				this.serviceData = {
					size: 12,
					index: 1,
					page: 0,
					total: 1,
					list: []
				};
				this.goodsCategoryId = 'all';
				this.goodsCategory = [];
				this.goodsData = {
					size: 12,
					index: 1,
					page: 0,
					total: 1,
					list: []
				};
				this.getServiceCategory();
				this.getGoodsCategory();
				this.getService();
				this.getGoods();
			},
			pageChange(e) {
				if (this.type == 'goods') {
					this.goodsData.index = e.current;
					this.getGoods();
				} else if (this.type == 'service') {
					this.serviceData.index = e.current;
					this.getService();
				}
			},
			switchItem(type) {
				this.type = type;
				if (this.type == 'goods') {
					this.goodsData.index = 1;
					this.getGoods();
				} else if (this.type == 'service') {
					this.serviceData.index = 1;
					this.getService();
				} else if (this.type == 'money') {
					// 无码商品
					this.setActive('UnnumberedGoods');
				}
			},
			keydown(value) {
				let arr = this.paymentMoney.split('.');
				if (arr[1]) {
					if (value == '.' || arr[1].length == 2) return;
					if (value == '00' && arr[1].length == 1) value = '0';
				}
				if (parseFloat(this.paymentMoney + value) > 1000000) {
					this.$util.showToast({
						title: '最大不能超过1000000'
					});
					return;
				}
				this.paymentMoney += value;
			},
			deleteCode() {
				this.paymentMoney = this.paymentMoney.substr(0, this.paymentMoney.length - 1);
			},
			paymentMoneyConfirm() {
				if (!this.paymentMoney.length) {
					this.$util.showToast({
						title: '请输入收款金额'
					});
					return;
				}
				if (isNaN(parseFloat(this.paymentMoney)) || !/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
					.test(parseFloat(this.paymentMoney))) {
					this.$util.showToast({
						title: '收款金额格式错误'
					});
					return;
				}
				if (this.paymentMoney <= 0) {
					this.$util.showToast({
						title: '收款金额不能小于等于0'
					});
					return;
				}
				if (parseFloat(this.paymentMoney) > 1000000) {
					this.$util.showToast({
						title: '最大不能超过1000000'
					});
					return;
				}
				this.$emit('select', {
					goods_id: parseInt(new Date().getTime() / 1000),
					sku_id: parseInt(new Date().getTime() / 1000),
					num: 1,
					money: parseFloat(this.paymentMoney)
				});
				this.paymentMoney = '';
			},
			/**
			 * 打开收银秤
			 */
			openCashierSacle() {
				if (this.addon.includes('scale')) {
					if (!this.cashierSacle) {
						this.$api.sendRequest({
							url: '/scale/storeapi/scale/cashierscale',
							success: res => {
								if (res.code == 0 && res.data) {
									this.cashierSacle = res.data.config
									try {
										POS_.send('OpenWeigher',
											`OS2X:${this.cashierSacle.serialport}:${this.cashierSacle.baudrate}`
										);
									} catch (e) {
										this.cashierSacle = null
									}
								}
							}
						})
					} else {
						try {
							POS_.send('OpenWeigher', `OS2X:${this.cashierSacle.serialport}:${this.cashierSacle.baudrate}`);
						} catch (e) {
							this.cashierSacle = null
						}
					}
				}
			},
			/**
			 * 去皮
			 */
			tare() {
				POS_.send('Tare')
			},
			/**
			 * 清零
			 */
			zero() {
				POS_.send('Zero');
			},
			setActive(key) {
				this.$emit('active', key);
			},
			paymentMoneyChange(event) {
				if (this.paymentMoney.length == 0) {
					// 如果没有输入则结账
					this.setActive('SelectGoodsAfter')
				} else {
					this.setActive('UnnumberedGoods')
				}
			},
			// 商品数量减少
			dec(data) {
				if (this.skuinfo) {
					if (this.skuinfo.num <= 1) {
						this.skuinfo.num = 1;
					} else {
						this.skuinfo.num--;
					}
					this.$forceUpdate();
				}
			},
			// 商品数量增加
			inc(data) {
				if (this.skuinfo) {
					if (this.skuinfo.num >= this.skuinfo.stock) {
						this.skuinfo.num = this.skuinfo.stock;
					} else {
						this.skuinfo.num++;
					}
					this.$forceUpdate();
				}
			}
		},
		watch: {
			serviceCategoryId: function(nval) {
				this.serviceData.page = 0;
				this.$refs.loading.show();
				this.getService();
			},
			goodsCategoryId: function(nval) {
				this.goodsData.page = 0;
				this.$refs.goodsLoading.show();
				this.getGoods();
			},
			type: function() {
				this.searchText = '';
			}
		},
		computed: {
			goodsSpec() {
				if (this.allsku && this.skuinfo) {
					let data = [];
					if (this.skuinfo.goods_class != 6 || (this.skuinfo.goods_class == 6 && this.skuinfo
							.goods_spec_format)) {
						data = this.allsku['sku_id_' + this.skuinfo.sku_id].goods_spec_format;
					}
					return data;
				}
				return [];
			}
		}
	};
	/**
	 * 监听重量变化
	 * @param {Object} text
	 */
	window.WEIGHER_DATA_CALLBACK = function(text) {
		let data = text.split(':')
		self.$set(self.skuinfo, 'weigh', data[0] != '-' ? data[0] : '')
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
	}

	.header-operation {
		padding: 0.2rem 0;
		border-bottom: 0.01rem solid #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header-operation-left {
			display: flex;
			align-items: center;

			view {
				width: 1rem;
				height: 0.35rem;
				line-height: 0.35rem;
				text-align: center;
				font-size: 0.14rem;
				border: 0.01rem solid #e6e6e6;
				border-left-width: 0;
				transition: all 0.3s;
				cursor: pointer;

				&:hover,
				&.active {
					border-color: $primary-color;
					color: $primary-color;
					background-color: rgba($color: $primary-color, $alpha: 0.1);
					box-shadow: -0.01rem 0 0 0 $primary-color;
				}

				&:first-child {
					border-left-width: 0.01rem;
					box-shadow: none;
				}
			}
		}

		.header-operation-right {
			display: flex;
			align-items: center;

			input {
				background: #ffffff;
				border: 0.01rem solid #e6e6e6;
				border-radius: 0.02rem;
				height: 0.36rem;
				padding: 0 0.15rem;
				font-size: 0.14rem;

				&:first-child {
					margin-left: 0.1rem;
					margin-right: 0.1rem;
				}
			}

			.search-btn {
				width: 0.36rem;
				height: 0.36rem;
				background: #ffffff;
				border: 0.01rem solid #e6e6e6;
				border-radius: 0.02rem;
				border-left: 0;
				text-align: center;
				line-height: 0.36rem;
				cursor: pointer;
			}
		}
	}

	.content {
		position: relative;
		box-sizing: border-box;
		padding: 0.15rem 0;
		height: calc(100% - 0.78rem);
		transform: rotate(0);
		display: flex;
		flex-direction: row-reverse;

		.table-pages {
			display: flex;
			justify-content: flex-end;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 1.2rem;
			height: 0.6rem;
			background-color: #fff;
			z-index: 1;
		}
	}

	.type-switch {
		width: 1rem;
		margin-left: 0.1rem;
		font-size: 0.14rem;
		margin-bottom: 0.15rem;
		white-space: nowrap;
		border-left: 0.01rem solid #e6e6e6;
		padding-left: 0.1rem;

		/deep/ .uni-scroll-view-content {
			display: flex;
			flex-direction: column;
		}

		.switch-item {
			padding: 0.1rem 0.2rem;
			color: #303133;
			font-size: 0.14rem;
			cursor: pointer;
			display: inline-block;
		}

		.switch-item.active {
			background-color: rgba(133, 88, 250, 0.1);
			color: $primary-color;
		}
	}

	.list-wrap {
		position: relative;
		flex: 1;
		padding-bottom: 0.4rem;
	}

	.money-pages {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.money-wrap {
			background: #fff;
			border-radius: 0.05rem;

			.head {
				height: 0.6rem;
				line-height: 0.6rem;
				text-align: center;
				font-weight: bold;
				position: relative;

				text {
					font-size: 0.16rem;
				}

				.iconguanbi1 {
					position: absolute;
					right: 0.15rem;
					font-size: 0.22rem;
					cursor: pointer;
				}
			}

			.content-wrap {
				display: flex;
				border: 0.01rem solid #e6e6e6;
				height: 0.6rem;
				align-items: center;
				margin: 0 0.2rem;
				padding: 0 0.15rem;

				.unit {
					font-size: 0.25rem;
				}

				.money {
					margin-left: 0.05rem;
					font-size: 0.25rem;
				}
			}

			.keyboard-wrap {
				width: 4rem;
				padding: 0 0.2rem 0.3rem 0.2rem;
				margin-top: 0.1rem;
			}
		}
	}

	.table-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.table-item {
			border: 0.01rem solid #e6e6e6;
			display: flex;
			flex-direction: column;
			width: 1.9rem;
			height: 1.15rem;
			padding: 0.1rem;
			box-sizing: border-box;
			margin-top: .01rem;
			margin-left: .01rem;
			margin-right: 0.1rem;
			margin-bottom: 0.1rem;
			cursor: pointer;
			transition: border-color, background-color 0.3s;
			position: relative;

			&:hover {
				background-color: #eee;
			}

			.item-other {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 0.1rem;
			}

			.item-img {
				width: 0.5rem;
				height: 0.5rem;
				display: flex;
				align-items: center;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.item-name {
				height: 0.38rem;
				margin-bottom: 0.05rem;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.item-info {
				cursor: pointer;
				flex: 1;
				display: flex;

				.item-time {
					font-size: 0.12rem;
					color: #909399;
				}

				.item-money {
					font-size: 0.14rem;
					color: #fe2278;
					line-height: 1;

					.util {
						font-size: 0.12rem;
					}
				}
			}

			.no-stock {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.5);
				cursor: not-allowed;

				image {
					height: 60%;
				}
			}

			&.active {
				border-color: $primary-color;
				background-color: $primary-color;
				color: #fff;

				.item-time,
				.item-money {
					color: #fff;
				}
			}

			&.focus,
			&:focus {
				background-color: rgba(133, 88, 250, 0.1);
				border-color: rgba(133, 88, 250, 0.1);
				outline: none;

				&.active {
					color: #191919;

					.item-time,
					.item-money {
						color: #fe2278;
					}
				}
			}
		}
	}

	.sku-wrap {
		display: flex;
		flex-direction: column;
		width: 7rem;
		height: 4rem;
		background-color: #fff;
		border-radius: 0.04rem;
		box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

		.header,
		.footer {
			height: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 0.01rem solid #e6e6e6;
			position: relative;

			.title {
				font-size: 0.16rem;
				font-weight: bold;
			}

			.iconfont {
				line-height: 1;
				position: absolute;
				right: 0.15rem;
				font-size: 0.2rem;
				cursor: pointer;
			}
		}

		.body {
			flex: 1;
			padding: 0.15rem;

			scroll-view {
				height: 2.55rem;
			}
		}

		.spec {
			line-height: 0.35rem;
			font-weight: bold;
			margin-top: 0.1rem;
		}

		.spec-value {
			.value-item {
				display: inline-block;
				height: 0.3rem;
				line-height: 0.3rem;
				background-color: #fff;
				color: #333;
				border: 0.01rem solid #e6e6e6;
				margin: 0.05rem 0.1rem 0 0;
				padding: 0 0.1rem;
				cursor: pointer;
				transition: all 0.3s;
				border-radius: 0.04rem;

				&:hover,
				&.active {
					background: rgba($color: $primary-color, $alpha: 0.1);
					border-color: $primary-color;
					color: $primary-color;
				}

				&.disabled {
					color: #999;
					cursor: not-allowed;
					background: #f7f7f7;
					border-color: #f7f7f7;
				}
			}
		}

		.spec-value-form {
			display: flex;
			align-items: center;

			.spec-value-input {
				margin-right: 0.05rem;
				border-width: 0.01rem;
				border-style: solid;
				background-color: #fff;
				color: rgba(0, 0, 0, 0.85);
				border-radius: 0.02rem;
				padding-left: 0.1rem;
				height: 0.38rem;
				line-height: 0.38rem;
				font-size: 0.14rem;
				border-color: #e6e6e6;
				border-radius: 0.02rem;
				width: 2rem;
			}

			.num-dec {
				width: 0.25rem;
				height: 0.25rem;
				background: #e6e6e6;
				border: 0.01rem solid #e6e6e6;
				border-radius: 30%;
				text-align: center;
				line-height: 0.23rem;
				font-size: 0.25rem;
				margin-right: 0.1rem;
				cursor: pointer;
				transition: 0.3s;
			}

			.num-inc {
				width: 0.25rem;
				height: 0.25rem;
				background: $primary-color;
				border: 0.01rem solid #e6e6e6;
				border-radius: 30%;
				text-align: center;
				line-height: 0.23rem;
				font-size: 0.25rem;
				margin-left: 0.1rem;
				cursor: pointer;
				transition: 0.3s;
				color: #fff;
			}
		}

		.scale-action {
			button {
				width: .8rem;
				margin: .15rem .15rem 0 0;
			}
		}

		.goods-info {
			display: flex;

			.image {
				width: 0.7rem;
				height: 0.7rem;
				margin-right: 0.1rem;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					line-height: 1;
					margin-top: 0.05rem;
				}
			}
		}

		.footer {
			border: 0;
			height: 0.6rem;

			button {
				width: 95%;
			}
		}
	}

	.empty {
		text-align: center;
		padding-top: 1.2rem;

		image {
			width: 2rem;
		}

		.tips {
			color: #999;
			margin-top: 0.15rem;
		}
	}
</style>